<template>
  <div class="settle">
    <div class="checkAll">
      <input type="checkbox" /><span>全选</span>
    </div>
    <div class="amt">
      <span>合计</span>
      <span>¥{{amt}}</span>
    </div>
    <div class="toOrder">
      <div class="bn">结算</div>
    </div>
  </div>
</template>

<script>
import bus from "../index.js";

export default {
  data () {
    return {
      goods: [],
      amt: 0
    }
  },
  mounted () {
    var that = this
    bus.$on('getAmt', function() { that.getAmt() })
  },
  methods: {
    getAmt () {
      var amt1 = this.goods.filter((obj) => obj.goods_state == '1').reduce((amt, obj) => {
        return amt += obj.goods_price * obj.goods_count
      }, 0);
      this.amt = amt1;
    }
  }

}
</script>

<style lang="less" scoped>
.settle {
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: fixed;
  bottom: -1px;
  background-color: rgb(255, 255, 255);
  display: flex;
  // justify-content: space-around;
}

.checkAll {
  width: 60px;
  margin-left: 5px;
}
.amt {
  width: 100px;
  margin-left: 45px;
}
.toOrder {
  width: 100px;
  margin-left: 25px;
}
.bn {
  border-radius: 50px;
  margin-top: 10px;
  text-align: center;

  line-height: 40px;
  height: 40px;
  background-color: rgb(36, 120, 249);
}
</style>